{extend name="common/layout" /}
{block name="head"}
  <style type="text/css">
    .input-mid{width: 80px;text-align: center;background: #00b9da;color: #fff;border-radius: 10px;margin-left: -30px;height: 25px;line-height: 25px;z-index: 1;}
    .input-margin10{margin-left: -16px;}
  </style>
{/block}
{block name="main"}
<div class="admin-main fadeInUp animated" ng-app="hd" ng-controller="ctrl">

     <div class="padding30">
      <h3 class="page-box-title">{:lang('New Configuration')}</h3>
     </div>
     <div class="layui-form-box" style="width: 700px;">
    <form class="layui-form ">
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-label10">{:lang('Type')}</label>
            <div class="layui-input-6">
                 <select name="type" lay-filter="typeModel" lay-verify="required" data-title="{:lang('Please Choose')}" >
                        <option value="">{:lang('Please Choose')}</option>
                        <?php foreach($typeList as $type=>$typeLabel):?>
                        <option value="{$type}" <?php if($row['type'] == $type){echo "selected"; }?>>{$typeLabel}</option>
                        <?php endforeach;?>
                  </select>
            </div>
        </div>
         <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label layui-form-label10">{:lang('broadband')}</label>
            <div class="layui-input-inline" style="width: 183px;">
              <input type="text" name="min_mbps" lay-verify="number"  placeholder="{:lang('field_min_mbps')}" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid input-mid" style="">-</div>
            <div class="layui-input-inline input-margin10" style="width: 183px;">
              <input type="text" name="max_mbps"  lay-verify="number"  placeholder="{:lang('field_max_mbps')}" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        
        <!--地区-->
        <div class="areaBlcok" style="display: none;"> 
            <div class="layui-form-item">
              <label class="layui-form-label layui-form-label10">{:lang('A End')}</label>
              <div class="layui-input-6">
                   <input type="text" name="" disabled="" value="Hong Kong" autocomplete="off" class="layui-input">
              </div>
          </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-label10">{:lang('Z End')}</label>
                <div class="layui-input-inline">
                  <select name="country_id"  class="z-required" lay-filter="countryId" data-value="{$row['city_id']|intval}" data-aid="#city_id">
                    <option value="">{:lang('Please Choose')}</option>
                    <?php foreach($areas as $area):?>
                    <option value="{$area['id']}" <?php if($row['area_id'] == $area['id']){echo "selected"; }?>>{$area['name']}</option>
                    <?php endforeach;?>
              </select>
                </div>
                <div class="layui-input-inline">
                   <select name="city_id"  class="z-required" id="city_id"  >
                    <option value="">{:lang('Please choose the city')}</option>
                    
                  </select>
                </div>
             </div>
        </div>
      
        
  
        
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label layui-form-label10">{:lang('Monthly')}</label>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="rmb1" placeholder="￥" data-title="{:lang('Please enter the number')}" lay-verify="price" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid input-mid">{:lang('RMB/Month')}　</div>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="usd1" placeholder="USD" lay-verify="price" autocomplete="off" class="layui-input input-margin10">
              </div>
              <div class="layui-form-mid" style="color: #888;">{:lang('USD/Month')}</div>
            </div>
          </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label layui-form-label10">{:lang('Quarter')}</label>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="rmb3" placeholder="￥" lay-verify="price" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid input-mid">{:lang('RMB/Month')}　</div>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="usd3" placeholder="USD" lay-verify="price" autocomplete="off" class="layui-input input-margin10">
              </div>
              <div class="layui-form-mid" style="color: #888;">{:lang('USD/Month')}</div>
            </div>
          </div>  
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label layui-form-label10">{:lang('Semiannual')}</label>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="rmb6" lay-verify="price" placeholder="￥" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid input-mid">{:lang('RMB/Month')}　</div>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="usd6" placeholder="USD" lay-verify="price" autocomplete="off" class="layui-input input-margin10">
              </div>
              <div class="layui-form-mid" style="color: #888;">{:lang('USD/Month')}</div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label layui-form-label10">{:lang('Year')}</label>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="rmb12" placeholder="￥" lay-verify="price" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid input-mid">{:lang('RMB/Month')}　</div>
              <div class="layui-input-inline" style="width: 183px;">
                <input type="text" name="usd12" placeholder="USD" lay-verify="price" autocomplete="off" class="layui-input input-margin10">
              </div>
              <div class="layui-form-mid color555" style="color: #888;">{:lang('USD/Month')}</div>
            </div>
          </div>
        <div class="layui-form-item">
            <div class="layui-input-block layui-btn-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">{:lang('Submit')}</button>
                <a href="{:url('index')}" class="layui-btn layui-btn-primary">{:lang('Back')}</a>
            </div>
        </div>
    </form>
  </div>
</div>
{/block}
{block name="footer"}
<script>
    var m = angular.module('hd',[]);
    m.controller('ctrl',['$scope',function($scope) {
        //$scope.field = '{$info}'!='null'?{$info}:{name:''};
        layui.use(['form', 'layer'], function () {
            var form = layui.form, layer = layui.layer,$= layui.jquery;
            form.on('submit(submit)', function (data) {
                loading = layer.load(1,{shade:[0.1,'#fff']});
                // 提交到方法 默认为本身
                //data.field.id = $scope.field.id;
                $.post("", data.field, function (res) {
                    layer.close(loading);
                    if (res.code > 0) {
                        layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                });
            })
            form.on("select(typeModel)",function(obj){
                if(obj.value == 3 || obj.value == 8){
                    $(".areaBlcok").show();
                    $(".z-required").attr("lay-verify","required");
                }else{
                  $(".z-required").removeAttr("lay-verify");
                  $(".areaBlcok").hide();
                }
                form.render();
            })
            /*本端pop点切换*/
            form.on("select(countryId)",function(obj){
                var doem = obj.elem.dataset.aid;
                var value = obj.elem.dataset.value;
                loading = layer.load(1,{shade:[0.1,'#fff']});
                $.post("{:U('area/lists')}",{pid:obj.value},function(res){
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    layer.close(loading);
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            if(value == item.id){
                                $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                            }else{
                                $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                            }
                            
                        })
                    }
                    form.render();
                },'json')
            })
            setSelectedclick('area_id',$("select[name='area_id']").val());
        });
        
    }]);
</script>
{/block}